<template>
  <div class="login-container">
    <vue-particles
      color="#97D0F2"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#97D0F2"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      hoverMode="grab"
      clickMode="push"
      class="bg-position"
    >
    </vue-particles>
    <div class="login-box">
      <h1 :style="{ color: value ? '#13ce66' : '#408eff' }">法考模拟系统</h1>
      <div class="switchBox">
        <span
          :class="{ leftAcitive: !value }"
          class="switch-content"
          @click="value = false"
          >账号登录</span
        >
        <el-switch
          v-model="value"
          class="switchBtn"
          active-color="#13ce66"
          inactive-color="#409eff"
        />
        <span
          :class="{ rightActive: value }"
          class="switch-content"
          @click="value = true"
          >验证码登录</span
        >
      </div>

      <div class="login-card" :class="{ loginActive: value }">
        <account-login />

        <phone-login />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import accountLogin from "./cpns/account-login.vue";
import phoneLogin from "./cpns/phone-login.vue";
export default {
  components: {
    accountLogin,
    phoneLogin,
  },
  setup() {
    let value = ref(false);
    return {
      value,
    };
  },
};
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  .bg-position {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -999;
  }
  .login-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    .switchBox {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .switch-content {
        cursor: pointer;
        transition: all 0.3s;
      }
      .switchBtn {
        margin: 0 5px;
      }
      .leftAcitive {
        color: #408eff;
        font-size: 18px;
        font-weight: 700;
      }
      .rightActive {
        color: #13ce66;
        font-size: 18px;
        font-weight: 700;
      }
    }
    .loginActive {
      transform: rotateY(180deg);
    }
    .login-card {
      margin-top: 30px;
      width: 380px;
      height: 350px;
      position: relative;
      border-radius: 30px;
      background: #fafafa;
      box-shadow: 10px 10px 20px #dadada, -10px -10px 20px #ffffff;
      transform-style: preserve-3d;
      transition: 0.7s;
    }
  }
}
</style>
